<template>
	<div class="look">
		<div class="table">
			<div class="table-top">
				<p>
					<span></span>
					<span>{{form.nametitle}}</span>
				</p>
				<p style="justify-content: flex-end;">
					<span>净含量：</span>
					<span>{{form.suttle}}</span>
				</p>
			</div>
			<div class="table-center">
				<div class="table-center-l">
					<p>
						<span>执行标准：</span>
						<span>{{form.standard}}</span>
					</p>
					<p>
						<span>生产日期：</span>
						<span>{{form.dateproduced}}</span>
					</p>
					<p>
						<span>生产批号：</span>
						<span>{{form.pihao}}</span>
					</p>
				</div>
				<div class="table-center-c" v-if="form.status == 1">
					<p v-if="form.grades">
						<span>等级：</span><span>{{form.grades}}</span>
					</p>
					<p v-if="form.specifications">
						<span>规格：</span><span>{{form.specifications}}</span>
					</p>
					<p v-if="form.categorys">
						<span>类别：</span><span>{{form.categorys}}</span>
					</p>
				</div>
				<div class="table-center-c" v-if="form.status == 2">
					<p v-if="form.erpcode">
						<span>ERP编码：</span><span>{{form.erpcode}}</span>
					</p>
					<p v-if="form.sapcode">
						<span>SAP代码：</span><span>{{form.sapcode}}</span>
					</p>
					<p v-if="form.baozhuangGrades">
						<span>包装规格：</span><span>{{form.baozhuangGrades}}</span>
					</p>
				</div>
				<div class="table-center-c" v-if="form.status == 3">
					<p v-if="form.materielcode">
						<span>物料代码：</span><span>{{form.materielcode}}</span>
					</p>
					<p v-if="form.suppliers">
						<span>供应商：</span><span>{{form.suppliers}}</span>
					</p>
					<p v-if="form.baozhuangGrades">
						<span>包装规格：</span><span>{{form.baozhuangGrades}}</span>
					</p>
				</div>
				<div class="table-center-c" v-if="form.status == 5">
					<p v-if="form.grades">
						<span>等级：</span><span>{{form.grades}}</span>
					</p>
					<p v-if="form.baozhuangGrades">
						<span>包装规格：</span><span>{{form.baozhuangGrades}}</span>
					</p>
				</div>
				<div class="table-center-c" v-if="form.status != 5 && form.status != 3 && form.status != 2 && form.status != 1">
					
				</div>
				<div class="table-center-r">
					<p>
						<span>生产许可证编号：</span>
						<span>{{form.tab}}</span>
					</p>
					<p v-if="form.status == 6 || form.status == 7">
						<span>规 格：</span><span>{{form.specifications}}</span>
					</p>
					<p v-if="form.kg">
						<span>毛 重：</span><span>{{form.kg}}</span>
					</p>
					<p v-if="form.hanliang">
						<span>含 量：</span><span>{{form.hanliang}}</span>
					</p>
				</div>
			</div>
			<!-- tale底部 -->
			<div class="table-btm">
				<div>
					<p>
						<span v-if="form.tradename">商品名：</span>
						<span v-if="form.tradename">{{form.tradename}}</span>
					</p>
					<p v-if="form.piwen">
						<span v-if="form.piwen">批准文号：</span>
						<span v-if="form.piwen">{{form.piwen}}</span>
					</p>
					<p style="text-align: right;">
						<span></span><span>{{form.type}}</span>
					</p>
				</div>
				<div>
					<p>
						<span>成分表：</span><span>{{form.chengfenvalues}}</span>
					</p>
				</div>
				<div>
					<p>
						<span>保质期：</span><span>{{form.expirations}}</span>
					</p>
				</div>
				<div>
					<p>
						<span>使用量：</span><span>{{form.use}}</span>
					</p>
				</div>
				<div>
					<p>
						<span>使用方法：</span><span>{{form.method}}</span>
					</p>
				</div>
				<div>
					<p>
						<span>适用范围：</span><span>{{form.scope}}</span>
					</p>
				</div>
				<div v-if="form.ensurevalue">
					<p style="width: 88.5%;">
						<span>成分保证值：</span><span>{{form.ensurevalue}}</span>
					</p>
				</div>
				<div>
					<p style="width: 89%;">
						<span>贮藏方法：</span><span>{{form.condition}}</span>
					</p>
				</div>
				<div>
					<p>
						<span>注意事项：</span><span>{{form.notice}}</span>
					</p>
				</div>
				<!-- <div>
					<p>
						<span>备注：</span>
						<span>乳酸钙粉</span>
					</p>
				</div> -->
				<h6>
					<div style="display: flex; align-items: center;">
						<img src="@/assets/img/qingzhen.jpg" width="100" v-if="form.status == 7">
						<img src="@/assets/img/kosher.png" width="100" v-if="form.status == 8">
						<svg width="200px" height="70px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="margin: 0px;">
							<polygon points="50,31 120,59  190,31  120,1" style="fill:#FFFFFF;stroke:#000000;stroke-width:2;">
							</polygon>
							<text style="fill: black;font-size: 16px;" x="95" y="35">合&nbsp;&nbsp;&nbsp;&nbsp;格</text>
						</svg>
					</div>
					<img :src="form.imgurl" alt="">
				</h6>
			</div>
			<div class="tips">
				<p>本企业通过 ISO9001、ISO14001、ISO45001、ISO22000 管理体系认证</p>
				<p><span>生产商：河南金丹乳酸科技股份有限公司</span><span>地址：河南省周口市郸城县金丹大道08号</span></p>
				<p><span>电话：0394-3195355 3195318</span><span>传真：0394-3195766</span><span>网址：http://www.hnjindan.com</span></p>
			</div>
		</div>
	</div>
</template>

<script>
import { searchMd } from '@/api/ewmApi'
export default {
	data() {
		return {
			form: {}
		};
	},
	mounted(){
		console.log(this.$route.params)
		if(this.$route.params.md){
			this.getDetail(this.$route.params.md)
		}else{
			this.form = JSON.parse(this.$route.params.options)
			console.log(this.form)
		}
	},
	methods: {
		getDetail(id){
			searchMd(id).then(res => {
				console.log(res)
				this.form = res.data.content
			})
		}
	}
};
</script>

<style lang="scss" scoped>
p {
	padding: 0;
	margin: 0;
}
.app-container {
	background: #fff;
}
.table {
	width: 1230px;
	&-top {
		padding-top: 6px;
		padding-bottom: 10px;
		border-top: 3px solid #000000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		> p {
			// font-family: '宋体';
			// flex: 1;
			display: flex;
			font-size: 55px;
			align-items: center;
			/deep/.el-input {
				width: 200px;
			}
			/deep/.el-input--medium .el-input__inner {
				width: 200px !important;
			}
		}
	}
	&-center {
		border-top: 3px solid #000000;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 8px 0;
		// &-l{
		// 	flex: 1.5;
		// }
		// &-c{
		// 	flex: 1;
		// }
		// &-r{
		// 	flex: 1.5;
		// }
		>div{
			> p {
				font-family: '宋体';
				width: 100%;
				display: flex;
				font-size: 27px;
				font-weight: bold;
				align-items: center;
				/deep/.el-input {
					width: 200px;
				}
				/deep/.el-input--medium .el-input__inner {
					width: 200px !important;
				}
			}
		}
	}
	&-btm {
		position: relative;
		border-top: 3px solid #000000;
		padding-top: 5px;
		height: 370px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		> div {
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			&:first-child{
				justify-content: space-between;
				> p {
          width: auto;
        }
			}
			> p {
				font-family: '宋体';
				width: 98%;
				// display: flex;
				font-size: 27px;
				// height: 40px;
				font-weight: bold;
				// align-items: center;
				// >span{
				// 	&:last-child{
				// 		flex: 1;
				// 		overflow: hidden;
				// 	}
				// }
				/deep/.el-input {
					width: 200px;
				}
				/deep/.el-input--medium .el-input__inner {
					width: 200px !important;
				}
				/deep/.el-textarea {
					width: 200px !important;
				}
				&:nth-child(3) {
					justify-content: flex-end;
				}
			}
		}
		> h6 {
			position: absolute;
			right: 0;
			top: 50px;
			display: flex;
			flex-direction: column;
			align-items: center;
			>img{
				width: 120px;
				height: 120px;
				position: absolute;
				right: 20px;
    		top: 80px;
			}
		}
	}
}
.tips{
		width: 100%;
		padding-top: 10px;
		>p{
			display: flex;
			justify-content: space-between;
			font-size: 25px;
			font-weight: bold;
			font-family: '黑体';
			line-height: 38px;
		}
	}
	.submit{
		width: 100px;
		height: 40px;
		background: #18a05e;
		border-radius: 5px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		font-size: 16px;
		cursor: pointer;
	}
</style>
